<template>
    <div class="dashboard-container" v-loading="dloading">
        <el-row class="list-menu">
            <el-button type="primary" @click="addCamp">新增</el-button>
            <!-- <el-button type="warning" @click="modifyCamp">修改</el-button>
            <el-button type="danger" @click="removeCamp">删除</el-button> -->
        </el-row>

        <el-card v-if="data">
            <el-table :data="data.list" border style="width: 100%">
                <el-table-column prop="sort" label="排序" width="60" align="center">
                </el-table-column>
                <el-table-column prop="groupCode_txt" label="分组" width="180">
                </el-table-column>
                <el-table-column prop="title" label="标题">
                </el-table-column>
                <el-table-column prop="img" label="图片" width="180">
                    <template slot-scope="scope">
                        <el-image class="list-img" :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="img" label="轮播图片" width="300">
                    <template slot-scope="scope" v-if="scope.row.imgJson">
                        <template v-for="(item, index) in JSON.parse(scope.row.imgJson)">
                            <el-image class="list-img list-img-swiper" :src="item.src" :preview-src-list="[item.src]"></el-image>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="people" label="推荐人数">
                </el-table-column>
                <el-table-column prop="campArea" label="面积">
                </el-table-column>
                <el-table-column prop="desc" label="描述">
                    <template slot-scope="scope">
                        <span style="white-space: nowrap;">{{ scope.row.desc}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="recommend" label="是否推荐">
                    <template slot-scope="scope">{{ scope.row.recommend === 'true' ? '是' : '否' }}</template>
                </el-table-column>
                <el-table-column prop="remarks" label="备注">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180">
                    <template slot-scope="scope">{{ parseTime(scope.row.createTime) }}</template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">{{ scope.row.status === 'true' ? '启用' : '禁用' }}</template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="140">
                    <template slot-scope="scope">
                        <el-button type="text" size="small"  @click="modifyCamp(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="removeCamp(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :data="data" @currentChange="currentChange"></pagination>
        </el-card>

        
        <el-drawer :wrapperClosable="false"  custom-class="w-drawer" :title="`${drawerType == 1 ? '新增' : '修改'}营位`" :visible.sync="drawer"  :direction="direction" @close="drawerClose">
            <div class="w-card" v-if="drawer">
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="分组" prop="groupCode">
                        <el-select v-model="form.groupCode" placeholder="请选择分组" @change="groupChange($event)">
                            <el-option :label="item.title" :value="item.groupCode" v-for="(item, index) in groupList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="form.title" placeholder="请填写标题"></el-input>
                    </el-form-item>
                    <el-form-item label="封面图片" prop="img">
                        <el-upload v-loading="loading" :on-progress="progress" list-type="picture-card" class="swiper-upload" :action="postFileUlr" :on-success="uploadSuccess" :show-file-list="false"
                             >
                             <i class="el-icon-plus avatar-uploader-icon"></i>
                             <div class="poster-img" :style="`background-image:url('${form.img}')`"></div>
                        </el-upload>
                    </el-form-item>

                    
                    <el-form-item label="轮播图" prop="img">
                        <div class="swiper-content">
                            <div class="swiper-img" v-for="(item, index) in swiperList" :style="`background-image:url('${item.src}')`">
                                <div class="del-img" @click="delSwiperImg(index)">×</div>
                                
                            </div>
                            <el-upload v-loading="swiperLoading" :on-progress="swiperProgress" list-type="picture-card" class="swiper-upload" :action="postFileUlr" :on-success="swiperUploadSuccess" :show-file-list="false"
                            multiple>
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-form-item>
                    
            

                    <el-form-item label="推荐人数" prop="people">
                        <el-input v-model="form.people" placeholder="请填写推荐人数如：4-6人"></el-input>
                    </el-form-item>
                    <el-form-item label="面积" prop="campArea">
                        <el-input v-model="form.campArea" placeholder="请填写营地面积如：4米X4米"></el-input>
                    </el-form-item>
                    <el-form-item label="是否推荐" label-width="80px" prop="recommend">
                        <el-select v-model="form.recommend" placeholder="请选择状态">
                            <el-option label="是" value="true"></el-option>
                            <el-option label="否" value="false"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="form.desc"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="form.remarks"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" label-width="80px" prop="status">
                        <el-select v-model="form.status" placeholder="请选择状态">
                            <el-option label="启用" value="true"></el-option>
                            <el-option label="禁用" value="false"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input type="number" v-model="form.sort" placeholder="数字越大越靠前"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <el-button type="primary" class="drawer-bottom" @click="submit('form')">确认</el-button>
        </el-drawer>
    </div>
</template>

<script>
import {parseTime} from '@/utils/index';
import request from '@/utils/request';
import { remove } from 'js-cookie';
export default {
    data() {
        this.parseTime = (d)=> parseTime(d)
        return {
            swiperLoading: false,
            postFileUlr: process.env.VUE_APP_BASE_API + '/upload-file',
            list: [],
            direction: 'rtl',
            drawer: false,
            dloading: true,
            form: {
                groupCode: '',
                title: '',
            },
            rules: {
                groupCode:[{ required: true, message: '请输入分类编码', trigger: 'blur' }],
                title:[{ required: true, message: '请输入标题', trigger: 'blur' }],
                typeName:[{ required: true, message: '请输入分类名称', trigger: 'blur' }],
                status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
                img: [{ required: true, message: '请上传图片', trigger: 'blur' }],
            },
            groupList: [],

            drawerType: 1,
            loading: false,
            swiperList: [],
            currentRow: false,
            data: '',
        }
    },
    mounted() {
        this.getGroup();
        this.getList();
    },
    methods: {
        currentChange(e) {
            this.getList(e);
        },
        delSwiperImg(index) {
            this.swiperList.splice(index, 1);
        },
        progress(event, file, fileList) {
            console.log('开始上传')
            this.loading = true;
        },
        swiperProgress() {
            console.log('开始上传')
            this.swiperLoading = true;
        },
        removeCamp(item) {
            this.form = item;
            this.$confirm(`此操作将永久删除【${this.form.title}】营位, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                request.get('/camp-list/remove', {
                    params: {
                        id: this.form._id,
                    },
                }).then((res)=> {
                    this.getList();
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
       
        },
        modifyCamp(item) {
            this.form = item;
            this.drawerType = 2;
            this.drawer = true;
            this.swiperList = JSON.parse(this.form.imgJson);
    
        },
        groupChange(e) {
            let itme = this.groupList.filter((item)=> item.groupCode == e)[0];
            this.form.groupCode_txt = itme.title;
        },
        uploadSuccess(response, file, fileList) {
            let img = response.data.file_list[0];
            this.form.img = img.download_url;
            this.form.fileid = img.fileid;
            this.loading = false;
            this.$forceUpdate();
        },
        swiperUploadSuccess(res) {
            let img = res.data.file_list[0];
            let imgItem = {
                src: img.download_url,
                fileid: img.fileid,
            }
            this.swiperList.push(imgItem);
            this.swiperLoading = false;
            this.$forceUpdate();
        },
        addCamp() {
            this.form = {};
            this.swiperList = [];
            this.drawer = true;
        },
        getList(num) {
            request.get('/camp-list', {
                params: {
                    pageNum: num || 1,
                },
            }).then((res)=> {
                this.data = res.data;
                this.dloading = false;
            })
        },
        getGroup() {
            request.get('/camp-group').then((res)=> {
                this.groupList = res.data.list;
            })
        },
        submit(formName) {
            let _this = this;
            this.$refs[formName].validate((valid) => {
            if (valid) {
                // 修改
                _this.form.createTime = new Date().getTime();
                _this.form.imgJson = JSON.stringify(_this.swiperList); 
                if (_this.drawerType == 2) {
                    request.get('/camp-list/update', {
                        params: _this.form,
                    }).then((res)=> {
                        _this.submitSuccess();
                    })

                    return;
                }


                // 新增
                request.get('/camp-list/add', {
                    params: _this.form,
                }).then((res)=> {
                    _this.submitSuccess();
                })
                // // alert('添加成功')
            }
            });
        },
        drawerClose() {
            this.form = {};
            this.drawerType = 1;
            this.currentRow =false;
        },
        submitSuccess() {
            this.drawer = false;
            this.form = {};
            this.$message({
                message: '操作成功',
                type: 'success'
            });
            this.getList();
            this.currentRow =false;
        },
    },
}
</script>
<style lang="scss">
.yy-date{
    display: flex;
    flex-wrap: wrap;
    .txt{
        width: 25%;
        border: 1px solid #409EFF;
        border-radius: 5px;
        margin-top: 5px;
        margin-right: 5px;
        text-align: center
    }
}
.del-img{
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: red;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.list-img{
    width: 50px;
    height: 50px;
    .el-image__preview{
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
}
.swiper-upload{
    width: 100px;
    height: 100px;
    .el-upload--picture-card{
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.swiper-content{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    .swiper-img{
        position: relative;
        border-radius: 8px;
        width: 100px;
        height: 100px;
        background-position: center center;
        background-size: cover;
        margin-right: 8px;
        margin-bottom: 8px;
    }
}
.w-drawer{
    .el-drawer__body{
        overflow-y: scroll;
        padding-bottom: 80px;
    }
}
</style>
<style lang="scss"  scoped>

.w-card{
    padding: 20px;
}
.dashboard {
    &-container {
        margin: 30px;
    }

    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}

.list-menu {
    margin-bottom: 40px;
}
.drawer-bottom{
    display:block;
    margin: auto;
    // position: absolute;
    // bottom: 20px;
    // left: 50%;
    // transform: translateX(-50%);
  }
  .poster-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-size: cover;
    background-position: center center;
    height: 100%;
    border-radius: 8px;
  }
.upload-demo{
    width: 148px;
    position: relative;
    // width: 300px;
    // height: 150px;
  }
</style>